<template>
  <div class="essay-container">
      <!-- 导航栏 -->
      <div class="bar">
         <nav-bar>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
      <template #center>
          <div>文章详情</div>
      </template>
    </nav-bar>
    </div>
    <div class="essay">
    <div class="essay-title"><h2>{{essayContent.title}}</h2></div>
    <div class="user-info">
          <van-cell center>
              <template #icon>
                  <van-image
                    fit='cover'
                    round
                    :src="essayContent.aut_photo"
                    />
              </template>
              <template #title>
                  <span>{{ essayContent.aut_name }}</span>
              </template>
                <template #label>
                  <span>{{ essayContent.pubdate | transfromRelativeTime }}</span>
              </template>
              <template #default>
                  <van-button round type="info" icon="plus" v-if="!essayContent.is_followed" @click="handleFollowed" :disabled="isDisabledFollowBtn">关注</van-button>
                  <van-button round type="default" v-else @click="handleFollowed" :disabled="isDisabledFollowBtn">已关注</van-button>
              </template>
          </van-cell>
    </div>
    <!-- 文章主题内容 -->
    <div class="essay-content markdown-body" v-html="essayContent.content" ref='essay'>
    </div>
          <!--  评论列表 -->
    <comment-list :essay-id="essayId"></comment-list>
    </div>
    <!-- 底部单元格 -->
    <div class="bottom-cell">
        <bottom-cell :essay-id="essayId" :essay-content="essayContent"></bottom-cell>
    </div>
  </div>
</template>

<script>
import 'github-markdown-css/github-markdown.css'
import NavBar from 'components/NavBar'
import { getEssay } from 'network/news'
import { followUser, cancelFollowUser } from 'network/user'
import { ImagePreview } from 'vant'
import BottomCell from './essaychild/BottomCell.vue'
import CommentList from './essaychild/CommentList.vue'
import { mapState } from 'vuex'
export default {
  name: 'Essay',
  components: { NavBar, BottomCell, CommentList },
  props: {
    essayId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data () {
    return {
      essayContent: {},
      // 存储当前文章页面的所有图片,便于点击预览
      imageSrc: [],
      // 是否禁用关注按钮
      isDisabledFollowBtn: false
    }
  },
  created () {
    this.onloadEssay()
  },
  mounted () {

  },
  methods: {
    // 加载文章
    async onloadEssay () {
      const { data: res } = await getEssay(this.essayId)
      console.log(res)
      this.essayContent = res.data
      this.hanlePreviewImage()
    },
    hanlePreviewImage () {
      this.$nextTick(() => {
        const div = this.$refs.essay
        console.log(div)
        const imgs = div.querySelectorAll('img')
        // 先把所有的图片路径存到数组里面
        imgs.forEach(element => {
          this.imageSrc.push(element.src)
        })
        console.log(this.imageSrc)
        // 挨个绑定事件
        imgs.forEach((element, index) => {
          element.addEventListener('click', () => {
            ImagePreview({
              images: this.imageSrc,
              startPosition: index
            })
          })
        })
      })
    },
    // 关注或者取消关注
    async handleFollowed () {
      if (!this.userState) {
        return this.$toast.fail('您还没有登录哦o(╯□╰)o')
      }
      this.isDisabledFollowBtn = true
      try {
        if (this.essayContent.is_followed === true) {
          await cancelFollowUser(this.essayContent.aut_id)
          this.$toast('取消关注成功O(∩_∩)O')
        } else {
          await followUser(this.essayContent.aut_id)
          this.$toast('关注用户成功(*^▽^*)')
        }
      } catch (error) {
        this.$toast('服务错误(⊙o⊙)…,接口出问题啦')
      }
      this.essayContent.is_followed = !this.essayContent.is_followed
      this.isDisabledFollowBtn = false
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style lang='less' scoped>
    .essay-container{
        background-color: #fff;
        .essay{
          position: fixed;
          top: 46px;
          left: 0;
          right: 0;
          bottom: 49px;
          overflow-y: auto;
        }
        .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}
@media (max-width: 767px) {
    .markdown-body {
        padding: 15px;
            }
        }
      .bar{
      /deep/  .van-nav-bar__title{
            font-size: 14px;
        }
      }
      .essay-title{
          h2{
              margin-top: 23px;
              font-size: 18px;
              padding-right: 16px;
              padding-left: 16px;
              line-height: 30px;
          }
      }
      .user-info{
          .van-image{
              width: 35px;
              height: 35px;
              margin-right: 11px;
          }
          .van-button{
              width: 86px;
              height: 27px;
              font-size: 14px;
          }
          .van-cell__label{
              margin-top: unset;
          }
          margin-bottom: 20px;
      }
    }
</style>
